<template>
	<view :class="`r-radio-group r-radio-group--${direction}`">
		<slot v-if="$slots.default"></slot>
	</view>
</template>

<script setup>
import CheckboxGroupProps from './props.js';
import { provide, nextTick, inject, computed } from 'vue';
import { RADIO_KEY } from '@/uni_modules/r-utils-constant/js_sdk/index.js';
const props = defineProps({ ...CheckboxGroupProps });
const emit = defineEmits(['update:value', 'change']);

const updateValue = (value) => {
	emit('update:value', value);
	nextTick(() => {
		emit('change', value);
	});
};
provide(RADIO_KEY, { props, updateValue });
</script>
<style lang="scss" scoped>
.r-radio-group {
	&--horizontal {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}
	&--vertical {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
}
</style>
